<template>
  <div class="main_box">
    <div class="detail_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button plain size="small" type="success" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
      </div>
      <div class="con">
        <ul>
          <li>
            <label class="label">医生姓名:</label>
            <span>{{doctorData.doctorName}}</span>
          </li>
          <li>
            <label class="label">医生性别:</label>
            <span v-if="doctorData.doctorSex == 1">男</span>
            <span v-else-if="doctorData.doctorSex == 2">女</span>
          </li>
          <li>
            <label class="label">医生职称:</label>
            <span>{{doctorData.doctorTitle}}</span>
          </li>
          <!--<li>
            <label class="label">从业时间</label>
            <span>{{formatDate(doctorData.employmentDate)}}</span>
          </li>-->
          <li class="photo">
            <label class="label">医生头像:</label>
            <span>
              <img :src="doctorData.doctorImageUrl">
            </span>
          </li>
          <li v-if="doctorData.hospitalId">
            <label class="label">医院名称:</label>
            <span>{{doctorData.hospitalName}}</span>
          </li>
          <li v-if="doctorData.institutionId">
            <label class="label">医检名称:</label>
            <span>{{doctorData.institutionName}}</span>
          </li>
          <li>
            <label class="label">科室名称:</label>
            <span>{{doctorData.officeName}}</span>
          </li>
          <li>
            <label class="label">医生地址</label>
            <span>{{doctorData.doctorAddress}}</span>
          </li>
          <li>
            <label class="label">备注</label>
            <span>{{doctorData.remark}}</span>
          </li>
          <li>
            <label class="label">是否需要结果提醒</label>
            <span>{{formatIsRemind(doctorData.isRemind)}}</span>
          </li>
          <li>
            <label class="label">关联采样价格模板编号:</label>
            <span>{{doctorData.hsModelId}}</span>
          </li>
          <li>
            <label class="label">关联采样价格模板名称:</label>
            <span>{{doctorData.hsModelName}}</span>
          </li>
          <li>
            <label class="label">核酸海报:</label>
            <div class="poster-btn">
              <button v-if="!doctorData.hsBillUrl" @click="createHsHb">生成海报</button>
              <button v-if="doctorData.hsBillUrl" @click="createHsHb">更新海报</button>
              <button v-if="doctorData.hsBillUrl" @click="viewHsHb">预览海报</button>
              <button v-if="doctorData.hsBillUrl" @click="downloadHsHb">下载海报</button>
            </div>
          </li>
          <li>
            <label class="label">核酸二维码:</label>
            <div id="qrCode" ref="qrCodeDiv"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Map from "@/components/Map";
import DoctorApi from "@/api/institution/doctor";
import QRCode from 'qrcodejs2';
import HospitalApi from "@/api/institution/hospital";

export default {
  data() {
    return {
      doctorData: "",
      fullscreenLoading: false
    };
  },
  components: {
    Map
  },
  computed: {
  },
  methods: {
    getData() {
      DoctorApi.getDoctor({doctorId: this.$route.query.id})
        .then(res => {
          if (res.status == 0 && res.data){
            this.doctorData = res.data;
            this.bindQRCode(res.data.hospitalId,res.data.officeId,res.data.doctorId)
          }
        });
    },
    bindQRCode(hospitalId, officeId, doctorId) {
      let id = hospitalId+","+officeId+","+doctorId
      new QRCode(this.$refs.qrCodeDiv, {
        text: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe7229f039bfe873b&redirect_uri=http%3A%2F%2Fh5.kanglailab.com%2FnucleicVisit&response_type=code&scope=snsapi_base&state='+id,
        width: 320,
        height: 320,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
      })
    },
    createHsHb(){
      // 加载遮罩层
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
      });
        DoctorApi.createHsHb({doctorId: this.$route.query.id})
          .then(res => {
            loading.close();
            if (res.status == 0 && res.data){
              this.doctorData.hsBillUrl = res.data;
            }
          })
        .catch(error => {
            loading.close();
            console.error(error)
            this.$message({
              message: error,
              type: 'warning'
            });
        });
    },
    viewHsHb(){
      window.open(this.doctorData.hsBillUrl,"_blank");
    },
    downloadHsHb(){
      let url = this.doctorData.hsBillUrl
      if (url){
        let name = this.$Utils.getFileNameByUrl(url)
        this.$Utils.downloadByBlob(url,name)
      }else{
        this.$Utils.notifyWarn("未生成海报")
      }
    },
    formatDate(value) {
      return this.$Utils.formatDate(value, "yyyy-MM-dd");
    },
    formatIsRemind(value){
      if(value == 0){
        return '否'
      }else if(value == 1){
        return '是'
      }
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/institu/doctorManagement' })
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
<style lang="scss" src="@/assets/css/views/Detail.scss" scope>
</style>
<style scoped>
.poster-btn{
      padding-bottom: 10px;
}

.poster-btn button{
  width: 124px;
  height: 33px;
  border: solid 1px white;
  border-radius: 10px;
  font-size: 15px;
  color: white;
  margin: 0 5px;
  cursor:pointer;
}

.poster-btn button:nth-child(1){
  background: #409EFF;
}

.poster-btn button:nth-child(1):hover{
  background: #66B1FF;
}

.poster-btn button:nth-child(2){
  background: #FDF6EC;
  color: #E6A23C;
  border: solid 1px #E6A23C;
}

.poster-btn button:nth-child(2):hover{
  background: #E6A23C;
  color: white;
}

.poster-btn button:nth-child(3){
  background: #F0F9EB;
  color: #67C23A;
  border: solid 1px #67C23A;
}
.poster-btn button:nth-child(3):hover{
  background: #67C23A;
  color: white;
}
</style>

